<template>
  <div v-if="visible" class="choose-icon-container">
    <el-dialog title="选择图标" width="520px" @close="dialogClose" :visible.sync="visible" :close-on-click-modal="false">
      <div class="icon-list">
        <svg class="icon" @click="chooseIcon(item)" v-for="item in iconList"
          :class="{ active: choosedIcon.icon === item.icon }" :key="item.icon" aria-hidden="true">
          <use :xlink:href="'#' + item.icon"></use>
        </svg>
      </div>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <el-button @click="confirmChoose"
                   type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        visible: false,
        iconList: [
          { icon: 'icongjlys-ic', name: 'gjlys-ic' },
          { icon: 'iconppj-ic', name: 'ppj-ic' },
          { icon: 'iconryjc-ic', name: 'ryjc-ic' },
          { icon: 'iconhntjd-ic', name: 'hntjd-ic' },
          { icon: 'iconwltsj-ic', name: 'wltsj-ic' },
          { icon: 'iconsgsjj-ic', name: 'sgsjj-ic' },
          { icon: 'iconzjdw-ic', name: 'zjdw-ic' },
          { icon: 'icondhj-ic', name: 'dhj-ic' },
          { icon: 'iconwtj-ic', name: 'wtj-ic' },
          { icon: 'iconjbj-ic', name: 'jbj-ic' },
          { icon: 'icondzj-ic', name: 'dzj-ic' },
          { icon: 'icontsqzj-ic', name: 'tsqzj-ic' },
          { icon: 'iconzkcl-ic', name: 'zkcl-ic' },
          { icon: 'icongjlaz-ic', name: 'gjlaz-ic' },
          { icon: 'iconqzj-ic', name: 'qzj-ic' },
          { icon: 'iconypj-ic', name: 'ypj-ic' },
          { icon: 'iconabxg-ic', name: 'abxg-ic' },
          { icon: 'icontzgl-ic', name: 'tzgl-ic' },
          { icon: 'iconzlxjzg-ic', name: 'zlxjzg-ic' },
          { icon: 'iconwlrk-ic', name: 'wlrk-ic' },
          { icon: 'iconpdrw-ic', name: 'pdrw-ic' },
          { icon: 'iconjsgl-ic', name: 'jsgl-ic' },
          { icon: 'iconzlgl-ic', name: 'zlgl-ic' },
          { icon: 'iconqshntys-ic', name: 'qshntys-ic' },
          { icon: 'iconscrk-ic', name: 'scrk-ic' },
          { icon: 'iconsbkz-ic', name: 'sbkz-ic' },
          { icon: 'iconxmjd-ic', name: 'xmjd-ic' },
          { icon: 'iconsgrz-ic', name: 'sgrz-ic' },
          { icon: 'icondpsj-ic', name: 'dpsj-ic' },
          { icon: 'iconscsl-ic', name: 'scsl-ic' },
          { icon: 'iconaqgl-ic', name: 'aqgl-ic' },
          { icon: 'iconjxxczg-ic', name: 'jxxczg-ic' },
          { icon: 'icongjck-ic', name: 'gjck-ic' },
          { icon: 'iconwlly-ic', name: 'wlly-ic' },
          { icon: 'iconwlcx-ic', name: 'wlcx-ic' },
          { icon: 'iconwljhd-ic', name: 'wljhd-ic' },
          { icon: 'icongyhsc-ic', name: 'gyhsc-ic' },
          { icon: 'iconfcrk-ic', name: 'fcrk-ic' },
          { icon: 'iconyjydsj-ic', name: 'yjydsj-ic' },
          { icon: 'icongyhsj-ic', name: 'gyhsj-ic' },
          { icon: 'iconfcly-ic', name: 'fcly-ic' },
          { icon: 'iconfccx-ic', name: 'fccx-ic' },
          { icon: 'iconhtgl-ic', name: 'htgl-ic' },
          { icon: 'icongjcx-ic', name: 'gjcx-ic' },
          { icon: 'iconaqyhpc-ic', name: 'aqyhpc-ic' },
          { icon: 'iconfcjhd-ic', name: 'fcjhd-ic' },
          { icon: 'icongyhsg-ic', name: 'gyhsg-ic' },
          { icon: 'iconscbz-ic', name: 'scbz-ic' },
          { icon: 'iconjkjcrb-ic', name: 'jkjcrb-ic' },
          { icon: 'iconkbgl-ic', name: 'kbgl-ic' },
        ],
        choosedIcon: ""
      };
    },

    props: {
      dialogVisible: {
        type: Boolean
      },

      callback: {
        type: Function
      }
    },
    watch: {
      dialogVisible(newval) {
        this.visible = newval;
      }
    },
    methods: {
      dialogClose() {
        this.$emit("update:dialogVisible", false);
      },
      chooseIcon(item) {
        this.choosedIcon = item;
      },
      // 确认选择
      confirmChoose() {
        if (!this.choosedIcon.icon) {
          this.$message.warning("请选择图标");
        } else {
          this.$emit("callback", this.choosedIcon);
          this.dialogClose();
        }
      }
    },
    created() { },
    mounted() { }
  };
</script>
<style scoped lang="scss">
  .choose-icon-container {
    .icon-list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .icon {
        width: 72px;
        height: 72px;
        margin-bottom: 20px;
        border: 1px solid transparent;
        box-sizing: content-box;
        padding: 4px;

        &.active {
          border: 1px solid #1890ff;
        }
      }
    }
  }
</style>